<template>
<div>
  state:{{state}}
  <!-- <br />
  plain:{{plain}} -->
  <br />
  state2:{{state2}}
  <br />
  state3:{{state3}}
  <br />
  state4:{{state4}}
  <br />
  state6:{{state6}}
  <div @click="changestate6">state6更新</div>
</div>

</template>

<script lang="ts">
import { reactive,readonly,watchEffect,isReactive,isProxy,isReadonly,toRaw,markRaw,shallowReactive ,shallowReadonly} from 'vue'
import Button from "@/components/Button.vue"
export default {
    components: {  },
  
  setup() {
    //const obj = reactive({ count: 0 })
    

    //readonly例子：reactive的proxy递归；readonly也递归
    // const original = reactive({ count: 0 })
    // const copy = readonly(original)

    // watchEffect(() => {
    // // works for reactivity tracking
    // console.log(copy.count)
    // //console.log(original.count)
    // })

    // // mutating original will trigger watchers relying on the copy
    // original.count = 3

    // // mutating the copy will fail and result in a warning
    // //copy.count++ // warning!

    //isReactive
    const foo = {name: 'John'}
    const state = reactive(foo)

    console.log("(state)",state) // -> true
    // readonly proxy created from plain object
    const plain = readonly({
      name: 'Mary'
    })
    // readonly proxy created from reactive proxy
    const stateCopy = readonly(state)


    console.log("isReactive(state)",isReactive(state)) // -> true
    console.log("isReactive(plain)",isReactive(plain)) // -> false
    console.log("isReactive(stateCopy)",isReactive(stateCopy)) // -> true


    console.log("isProxy(state)",isProxy(state)) // -> true
    console.log("isProxy(plain)",isProxy(plain)) // -> true
    console.log("isProxy(stateCopy)",isProxy(stateCopy)) // -> true


    console.log("isReadonly(state)",isReadonly(state)) // -> false
    console.log("isReadonly(plain)",isReadonly(plain)) // -> true
    console.log("isReadonly(stateCopy)",isReadonly(stateCopy)) // -> true

    // state.name = "zhangsan"
    // plain.name = "lisi";//只读，不可设置值
    // stateCopy.name = "wanger"//只读，不可设置值
    
     //toRaw - 有一些操作不需要更新UI界面,就可以用toRaw,节约性能,我们可以通过toRaw方法拿到它的原始数据，对原始数据进行修改,就不会更新UI界面
    console.log("toRaw(state) === foo",toRaw(state) === foo) // true
    const toRawstate = toRaw(state);
    state.name = "zhangsan"
    toRawstate.name = "lisi"

    const mackfoo = markRaw(foo)
    const state2 = reactive(mackfoo) 
    state2.name = 'wangwustate2'

    //shallowReactive定义浅响应数据：如果要改state3.foo必须直接更改state3=xxx，而不能用state3.foo=xxx
    const state3 = shallowReactive({
        foo: 1,
        nested: {
            bar: 2
        }
    })

    const state6 = shallowReactive({
        foo: 1,
        nested: {
            bar: 2
        }
    })
  const changestate6 = ()=>{
 state6.nested = {bar:233};
 console.log(state6.nested )
  }
   
  

    // mutating state's own properties is reactive
    state3.foo++
    // ...but does not convert nested objects
    console.log("isReactive(state3.nested):",isReactive(state3.nested)) // false
    state3.nested.bar++ // non-reactive



// 使用 shallowReadonly() 函数定义浅只读数据,这意味着，深层次的对象值是可以被修改的
const state4 = shallowReadonly({ foo: { bar: 1 } })

    //state4.foo = { bar: 2 }  // Warn
    state4.foo.bar = 2 // OK

    return {
     state,
     state2,
     state3,
     state4,
     state6,
     changestate6,
     plain
    }
  },
}
</script>